<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  // 1. 先执行主线程
  // 主线程: [console.log(2), console.log(3), console.log(5)]
  // 宏任务: [callback1]
  // 微任务: [callback2]

  // 2. 主线程执行完毕 清空微任务队列
  // 主线程: [console.log(2), console.log(3), console.log(5), console.log(4)]
  // 宏任务: [callback1]
  // 微任务: [callback2]  => callback2

  // 3. 微任务队列清空完毕  => 执行宏任务队列 首位 的任务
  // 主线程: [console.log(2), console.log(3), console.log(5), console.log(4),console.log(1)]
  // 宏任务: [callback1]  => callback1
  // 微任务: [] 

  setTimeout(function () { // callback1
    console.log(1);
  }, 0)

  new Promise(function (resolve) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
      if (i == 9999) {
        resolve()
      }
    }
    console.log(3);
  }).then(function () { // callback2
    console.log(4);
  })
  console.log(5);




</script>

</html>